<html>
   <head>
      <meta charset="utf-8">
      <title><?= $page_title; ?></title>
      
      <link rel="stylesheet" href="<?= site_url('public/css/simple-canvas-01.css'); ?>" media="all" />
   </head>
   
   
   <body>
      
      <canvas id="screen"></canvas>
      
      <div id="controls">
         <button id="control_reset">Reset</button>
         <button id="control_gray">Gray</button>
         <button id="control_otsu">Otsu</button>
         <button id="control_histo">Histogram</button>
         
         <button id="control_grid1" class="control_grid_btn">0,0</button>
         <button id="control_grid2" class="control_grid_btn">1,0</button>
         <button id="control_grid3" class="control_grid_btn">2,0</button>
         
         <button id="control_grid4" class="control_grid_btn">0,1</button>
         <button id="control_grid5" class="control_grid_btn">1,1</button>
         <button id="control_grid6" class="control_grid_btn">2,1</button>
         
         <button id="control_grid7" class="control_grid_btn">0,2</button>
         <button id="control_grid8" class="control_grid_btn">1,2</button>
         <button id="control_grid9" class="control_grid_btn">2,2</button>
         
         
         <div id="img_grid"></div>
      </div>
      
      <hr/>
      
      <p>Image loaded: <span id="info_imgloaded"></span></p>
      <p>Image width: <span id="info_imgwidth"></span></p>
      <p>Image height: <span id="info_imgheight"></span></p>
      <p>Log: <span id="info_log"></span></p>
      
      <script src="<?= site_url('public/js/jquery.1.7.1.js'); ?>"></script>
      <script src="<?= site_url('public/js/otsu.script.01.js'); ?>"></script>
      
   </body>
</html>